<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>婚礼相册</title>
    <meta name="viewport" content="initial-scale=1">
    <!--<link rel="stylesheet" href="../../dist/css/swiper.min.css">
<script src="../../dist/js/swiper.min.js"></script>-->

    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/index.css">
    <link href="https://fonts.googleapis.com/css?family=Anton|Noto+Serif+SC:700&display=swap&subset=chinese-simplified"
        rel="stylesheet">
    <script src="js/swiper.min.js"></script>
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="http://cdn.xiaocong-media.com/js/common/vue.min.js"></script>
    <script src="http://cdn.xiaocong-media.com/js/common/axios.js"></script>
    <style>
        #banner,
        #banner .swiper-slide {
            height: 60%;
            width: 60%;
        }

        .swiperbox {
            margin-top: 0px;
        }
    </style>
</head>

<body>
    <div id="main" class="container" v-cloak>
        <div class="titlebox">
            <div class="titlesub1">
                <span>WEDDING PHOTOS</span>
            </div>
            <div class="titlesub2">
                <span>{{Groom}}</span>
                <span>&</span>
                <span>{{Bride}}</span>
            </div>
            <div class="titlesub3">
                <span>- 感谢您参加我们的婚礼 -</span>
            </div>
        </div>
        <div class="swiperbox">
            <div style="max-width:640px; margin:0 auto;  position:relative;">
                <div class="swiper-container" id="banner">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(item,index) in ImgList" :key="index">
                            <img v-bind:src="item" data-preview-src="" data-preview-group="1" />
                        </div>
                    </div>
                </div>

            </div>
            <div class="pagination">
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
            <div class="userimg">
                <div class="yinyueimg">
                    <img class="yinyueimg_sub1 music360" v-on:click="playActive()" src="img/20191104134628.png" />
                    <img class="yinyueimg_sub2" v-on:click="closeActive()" src="img/20191104134823.gif" />
                </div>
            </div>
            <!--背景音乐-->
            <audio id="bagmusic" style="display: none;" ref='audio' autoplay="autoplay" loop preload="auto">
                <source id="musicbag"
                    src="https://yinfulollipop-wedding.oss-cn-beijing.aliyuncs.com/巨豆/邓超/apQEAFuNVVuAPR4gAChLRqJWhqg145.mp3" />
            </audio>
        </div>
        <input type="hidden" id="AppId" value="" />
        <input type="hidden" id="Timestamp" value="" />
        <input type="hidden" id="NonceStr" value="" />
        <input type="hidden" id="Signature" value="" />
    </div>

    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            function audioAutoPlay() {
                var audio = document.getElementById('bagmusic');
                audio.play();
                document.addEventListener("WeixinJSBridgeReady", function () {
                    audio.play();
                }, false);
            }
            audioAutoPlay();
        });
    </script>
    <script src="js/wedding.js"></script>
    <script src="js/mui.min.js"></script>
    <script src="js/mui.zoom.js"></script>
    <script src="js/mui.previewimage.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script>
        mui.previewImage();
    </script>
</body>

</html>